<template>
  <!-- 添加商品页面 -->
  <view class="main">
    <view style="width: 100%; height: 20rpx; background-color: #f8f8fa"></view>
    <!-- 商品展示 -->
    <view class="content">
      <view class="goodsName">
        <text class="xing_">*</text>
        <text>商品名称：</text>
        <input
          type="text"
          class="name"
          v-model="name"
          placeholder="请输入12个字内的商品名称"
          value=""
          maxlength="12"
        />
      </view>
      <view class="goodsAbstract">
        <text>商品简介：</text>
        <input
          type="text"
          class="abstract"
          v-model="abstract"
          placeholder="请输入18个字内的商品简介"
          maxlength="18"
        />
      </view>
      <view class="img">
        <text class="xing_">*</text>
        <text>商品图片：</text>
        <view class="upload" @tap="clk">上传图片</view>
      </view>
      <!-- 商品展示 -->
      <view class="imgs_" v-if="!imgs_p">
        <image
          src="../../imges/Bitmap3.png"
          mode="aspectFill"
          @tap="clk"
        ></image>
        <text>未上传图片</text>
      </view>
      <view class="imgs_one" v-if="imgs_p">
        <image :src="imgs_p" mode="aspectFill" @tap="changeDa"></image>
      </view>
      <view class="goodsOriginalPrice">
        <text>商品原价：</text>
        <input
          type="text"
          class="originalPrice"
          v-model="originalPrice"
          placeholder="请输入商品原价,保留两位小数"
        />
      </view>
      <view class="goodsPresentPrice">
        <text class="xing_">*</text>
        <text>商品现价：</text>
        <input
          type="text"
          class="presentPrice"
          v-model="presentPrice"
          placeholder="请输入商品现价,保留两位小数"
        />
      </view>
      <!--      <view class="goodsDetails">
				<text class="xing_">*</text>
				<text>店铺链接：</text>
				<input type="text" class="details" v-model="details" placeholder="请输入店铺/商品网址链接" maxlength="2000" />
			</view> -->
      <view class="goods_footer"> <text>*</text> 注：商品邮费需商家支付 </view>
      <!-- 	 <view class="goods_footer">
	 	请添加您的店铺 / 商品网址链接，买家点击商品，即可跳转您的商铺进行购买。为了规范商品帖子的内容，现阶段只支持输入淘宝，京东，拼多多，闲鱼，有赞商城的店铺 / 商品网址链接，给您带来的不便敬请谅解。
	 </view> -->
    </view>

    <avatar
      @upload="doUpload"
      quality="1"
      ref="avatar"
      selWidth="250upx"
      selHeight="250upx"
    ></avatar>
    <view class="btn_bottom">
      <view @tap="handleBtn" class="btn"> 完成 </view>
    </view>
  </view>
</template>
<script>
import request from "../../utils/request.js";
import avatar from "../../components/yq-avatar/yq-avatar.vue";
export default {
  data() {
    return {
      name: "",
      abstract: "",
      originalPrice: "", //原价
      presentPrice: "",
      // details: "", //店铺链接
      imgs: "", //图片
      imgs_p: "",
      upToken: "",
      qiniuyun: "",
      qiniuUrl: "",
    };
  },
  components: {
    avatar,
  },
  onLoad(options) {
    if (uni.getStorageSync("goodsDetail")) {
      this.name = uni.getStorageSync("goodsDetail").name;
      this.abstract = uni.getStorageSync("goodsDetail").abstract;
      this.originalPrice = uni.getStorageSync("goodsDetail").originalPrice;
      if (this.originalPrice == 0) {
        this.originalPrice = "";
      }
      this.presentPrice = uni.getStorageSync("goodsDetail").presentPrice;
      // this.details = uni.getStorageSync('goodsDetail').details
      this.imgs = uni.getStorageSync("goodsDetail").imgs;
      this.imgs_p = uni.getStorageSync("goodsDetail").imgs;
    }
    request({
      //获取参数
      url: "webSite/home/uploadApplication",
      method: "post",
      header: {
        "content-type": "application/json;charset=UTF-8",
        "api-client": "72e0fee8172411ea995200163e05ff66",
        "api-version": "1.3.3",
        "Source-Type": 7,
      },
      data: {},
    }).then((res) => {
      this.upToken = res.data.data.upToken;
      this.qiniuyun = res.data.data.qiniuDomain;
      this.qiniuUrl = res.data.data.region;
    });
  },
  methods: {
    clk() {
      this.$refs.avatar.fChooseImg(2, {
        selWidth: "600upx",
        selHeight: "338upx",
        inner: false,
        canRotate: false,
      });
    },
    doUpload(rsp) {
      this.$set([this.imgs], rsp.index, rsp.path);
      this.imgs_p = rsp.path;
      uni.uploadFile({
        url: "https://up-z0.qiniup.com",
        filePath: rsp.path,
        name: "file",
        formData: {
          token: this.upToken,
        },
        success: (uploadFileRes) => {
          this.imgs = this.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key;
          // console.log(JSON.parse(uploadFileRes.data).key,this.fileUrl)
        },
      });
    },
    handleBtn() {
      //点击完成
      if (this.name == "") {
        uni.showToast({
          title: "未填写商品名称",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      if (this.name.length > 12) {
        uni.showToast({
          title: "商品名称需低于12字",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      if (this.abstract.length > 18 && this.abstract != "") {
        uni.showToast({
          title: "商品简介需低于18字",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      if (this.imgs == "") {
        uni.showToast({
          title: "未上传商品封面",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      if (this.presentPrice == "") {
        uni.showToast({
          title: "未填写商品现价",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      var reg = /^(-)?(0|[1-9]\d*)\.\d{1,2}$/;
      if (
        !reg.test(this.originalPrice) &&
        this.originalPrice &&
        !Number.isInteger(Number(this.originalPrice))
      ) {
        uni.showToast({
          title: "商品原价需保留两位小数",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      if (
        !reg.test(this.presentPrice) &&
        !Number.isInteger(Number(this.presentPrice))
      ) {
        uni.showToast({
          title: "商品现价需保留两位小数",
          duration: 1500,
          icon: "none",
        });
        return false;
      }
      if (
        Number(this.presentPrice) > Number(this.originalPrice) &&
        this.originalPrice
      ) {
        uni.showToast({
          title: "商品现价不可大于原价",
          duration: 1500,
          icon: "none",
        });
        return false;
      }

      // if (this.details == '') {
      // 	uni.showToast({
      // 		title: '未填写店铺链接',
      // 		duration: 1500,
      // 		icon: 'none'
      // 	});
      // 	return false;
      // }
      var r = /^\+?[1-9][0-9]*$/; //正整数
      if (this.originalPrice && r.test(this.originalPrice)) {
        this.originalPrice = this.originalPrice + ".00";
      }
      if (this.presentPrice && r.test(this.presentPrice)) {
        this.presentPrice = this.presentPrice + ".00";
      }
      var red = /^(-)?(0|[1-9]\d*)\.\d{1}$/;
      if (this.originalPrice && red.test(this.originalPrice)) {
        this.originalPrice = this.originalPrice + "0";
      }
      if (this.presentPrice && red.test(this.presentPrice)) {
        this.presentPrice = this.presentPrice + "0";
      }
      var goodsDetail = {
        name: this.name,
        abstract: this.abstract,
        originalPrice: this.originalPrice,
        presentPrice: this.presentPrice,
        imgs: this.imgs,
        // details: this.details
      };
      uni.showToast({
        title: "保存成功",
        duration: 1200,
        icon: "none",
      });
      uni.setStorageSync("goodsDetail", goodsDetail);
      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
        });
      }, 1000);
    },
    selctPhone(e) {
      //点击上传图片
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.imgs_p = res.tempFilePaths[0];
          uni.uploadFile({
            url: "https://up-z0.qiniup.com",
            filePath: res.tempFilePaths[0],
            name: "file",
            formData: {
              token: this.upToken,
            },
            success: (uploadFileRes) => {
              this.imgs =
                this.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key;
              uni.showToast({
                title: "上传成功",
                duration: 1500,
                icon: "none",
              });
            },
          });
        },
      });
    },
    changeDa() {
      uni.previewImage({
        urls: [this.imgs],
        current: 0,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  padding: 0 32rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .img,
  .goodsName,
  .goodsAbstract,
  .goodsOriginalPrice,
  .goodsPresentPrice,
  .goodsDetails {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 27rpx 0;
    font-size: 32rpx;
    color: #888888;
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
    padding-left: 30rpx;
    position: relative;

    .xing_ {
      position: absolute;
      top: 34rpx;
      left: 10rpx;
      color: #ff0000;
      font-size: 30rpx;
    }
  }

  .name,
  .abstract,
  .originalPrice,
  .presentPrice,
  .details {
    width: 70%;
    font-size: 32rpx;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  input::-webkit-input-placeholder {
    font-size: 24rpx;
    color: #888888;
  }

  .goods_footer {
    margin-top: 20rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #888888;
    line-height: 29rpx;
    padding-bottom: 20rpx;

    text {
      display: inline-block;
      position: relative;
      top: 5rpx;
      margin-right: 10rpx;
      margin-left: 10rpx;
      color: #ff0000;
      font-size: 30rpx;
    }
  }

  .upload {
    width: 180rpx;
    height: 56rpx;
    text-align: center;
    line-height: 55rpx;
    border-radius: 28rpx;
    background-color: #2168eb;
    font-size: 26rpx;
    color: #ffffff;
    margin-left: 9rpx;
  }

  .imgs_ {
    margin-top: 30rpx;
    background-color: #f9f9fa;
    display: flex;
    width: 686rpx;
    height: 400rpx;
    border-radius: 8rpx;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    // margin: 27rpx 0;
    image {
      width: 100rpx;
      height: 100rpx;
    }

    text {
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #888888;
      margin-top: 6rpx;
    }
  }

  .imgs_one {
    margin-top: 30rpx;
    background-color: #f9f9fa;
    display: flex;
    width: 686rpx;
    height: 400rpx;
    border-radius: 8rpx;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.btn_bottom {
  margin-top: -80rpx;
  border-top: 2rpx solid #eee;
  padding-top: 30rpx;
  width: 750rpx;
  // height: 120rpx;
  background: rgba(255, 255, 255, 1);
  // box-shadow: 0px 1rpx 0px 0px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;

  .btn {
    width: 686rpx;
    height: 74rpx;
    background: rgba(33, 104, 235, 1);
    border-radius: 46rpx;
    margin: 0 auto;
    line-height: 74rpx;
    text-align: center;
    font-size: 26rpx;
    // font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
}
</style>
